<template>
            <footer>
                <ul class="title">
                    <li @click='one' :class="tab == 1?color:''">课程描述</li>
                    <li @click='two' :class="tab == 2?color:''">目录</li>
                    <li @click='three' :class="tab == 3?color:''">评论</li>
                </ul>
                <ul class="contain">
                    <!-- 课程描述 -->
                    <li class="description"  v-show='tab == 1' v-html='learnNumlist.courseDetail'>
                    </li>
                    <!-- 目录 -->
                    <li class="classList" v-show='tab == 2' :class="tab == 2">
                        <ul>
                            <li v-for='(item,index) in sectionslist' :key='index'>
                                <ul>
                                    <p>{{index+1}}.&nbsp;&nbsp;{{item.sectionName}}</p>
                                    <li v-for='(items,indexs) in item.subSections' :key="indexs">
                                        <ul>
                                            <li>{{index + 1}}-{{indexs +
                                                1}}&nbsp;&nbsp;{{item.subSections[indexs].sectionName}}</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!-- 评论 -->
                    <li class="comments" v-show='tab == 3' :class="tab == 3"><section class="addCom">
                        <p>评论 <Rate></Rate></p>

                        <!-- <div></div> -->
                        <textarea name="" id="" cols="154" rows="7" placeholder="请发表您对课程的评价"></textarea>
                    </section>
                        <ul>
                            <li v-for='(item,index) in commentlist1' :key='index'>
                                <div class="avatar"><img :src="item.user.avatarUrl" alt="">
                                </div>
                                <section class="right">
                                    <p class="name">{{item.user.nickname}}</p>
                                    <span class="com">{{item.commentContent}}</span>
                                    <span class="time">{{item.updatedTime}}</span>
                                </section>
                            </li>
                        </ul>
                    </li>
                </ul>
            </footer>
</template>

<script>
    import Rate from "./Rate";
    import {commentList,descriptionList} from "../api/api";

    export default {
        name: "Commit",
        components:{
            Rate
        },
        data() {
            return {
                imgUrl: '',
                list: [],
                price: '',
                watch: '',
                learnNumlist: '',
                sectionslist: "",
                commentlist1:"",
                tab : 1,
                color:'changeColor',
                courseTitle:''
            }
        },
        methods: {
            free(res) {
                if (res.data.data.isFree == 1) {
                    this.price = '免费',
                        this.watch = '立即观看'
                    return this.pricelist = { price: this.price, watch: this.watch }
                } else {
                    this.price = '￥' + res.data.data.coursePrice;
                    this.nofree = '加入购物车';
                    this.watch = '立即购买';
                    return this.pricelist = {
                        price: this.price,
                        nofree: this.nofree, watch: this.watch
                    }
                }

            },
            one(){
                this.tab = 1;
            },
            two(){
                this.tab = 2;
            },
            three(){
                this.tab = 3
            }
        },
        created() {
            // 评论接口
            commentList(`${this.$route.query.courseid}`).then(res => {
                    this.commentlist1 = res.data.rows
            }),
            // 课程描述和目录接口
            descriptionList(`${this.$route.query.courseid}`).then(res => {
                this.list = res.data.data;
                this.pricelist = this.free(res)
                this.learnNumlist = {
                    learnNum: res.data.data.participationsCount,
                    courseTitle: res.data.data.courseTitle,
                    courseDetail: res.data.data.courseDetail
                }
                this.sectionslist = res.data.data.sections;
            })
        },
        mounted() {
        }
    }
</script>

<style scoped>
    /* 评论部分开始 */
    .addCom{
        padding: 30px 28px 50px 28px;
    }
    .addCom>p,
    .addCom>div{
        color: #666;
    }
    .addCom>textarea{
        outline: none;
        box-sizing: border-box;
        padding: 5px 10px;
        color: #666;
        margin-top: 10px;
        border-color: #ccc;
    }
    .comments>ul{
        padding: 10px 30px;
    }
    .comments>ul>li{
        padding: 20px 0;
        border-top: 1px solid #ddd;
        overflow: hidden;
    }
    .avatar{
        /*border: 1px solid red;*/
        float: left;
        border-radius: 50%;
        width: 32px!important;
        height: 32px!important;
        background-color: #ccc;
        overflow: hidden;
    }
    .avatar>img{
        width: 100%;
        height: 100%;
    }
    footer .comments .right{
        float: left;
    }
    .right>.name{
        margin-top: 7px;
        margin-left: 14px;
    }
    .right>.com{
        margin-left: 14px;
    }
    .right>.time{
        color: #999;
        display: block;
        margin-left: 920px;

    }

    /* 评论部分结束 */
    /* 课程描述开始 */
    .description{
        padding: 30px 0;
        color: #666;
    }
    .description>p{
        margin: 0;
    }
    /* 课程描述结束 */
    /* 评论开始 */
    .avatar{
        width: 26px;
        height: 26px;
    }
    /* 评论结束 */
    main>footer{
        min-height: 206px;
        padding: 0 10px;
        margin: 20px auto;
        margin-bottom: 0;
        width: 1200px;
        /* height: 188px; */
        background-color: white;
    }
    .contain{
        padding-bottom: 20px;
    }
    main>footer>.title{
        overflow: hidden;
        padding: 0 12px;
        margin-bottom: 0!important;
        border-bottom: 1px solid #ddd;
    }
    main>footer>.title>li{
        float: left;
        margin-right: 32px;
        padding: 12px 16px;
        font-size: 14px;
        box-sizing: border-box;
        /*border-bottom: 2px solid transparent;*/
    }
    .changeColor{
        border-bottom: 2px solid #23db9b;
        color: #00cf8c;
    }
    main>footer>.title>li:hover{
        cursor: pointer;
    }
    /* 目录开始 */
    .classList{
        padding: 0 30px;
    }
    .classList p{
        padding: 0 10px;
        font-weight: 500;
        font-family: BLINK;
        margin-top: 16px;
        margin-bottom: 16px;
        font-size: 22px;
    }
    .classList>ul{
        padding-top: 12px;
    }

    .classList>ul>li>ul>li{
        color: #666;
        padding: 16px;
        margin-bottom: 10px;
        background-color: #eee;
    }
    .classList>ul>li>ul>li:hover{
        cursor: pointer;
        color:#00cf8c
    }
    .title>li:hover{
        color: #00cf8c;
    }
    /* 目录结束 */
    /* 评论部分结束 */
    /* 内容部分结束 */
</style>